<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Charts-bar</view>
			<view class="tui-page__desc">柱状图表</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title" style="padding-top: 0;">2021年上半年省份商品营业额（单位：w）</view>
			<view class="tui-charts-box">
				<tui-charts-bar tooltip ref="tui_column_1" :max="options1.max" :splitNumber="options1.splitNumber"
					:yAxis="options1.yAxis"></tui-charts-bar>
			</view>
			<view class="tui-title">各部门计划完成情况(完成率：%)</view>
			<view class="tui-charts-box">
				<tui-charts-bar ref="tui_column_2" tooltip :yAxis="options2.yAxis" :dataset="options2.dataset"
					:max="options2.max" :splitNumber="options2.splitNumber" :yAxisVal="options2.yAxisVal"
					:legend="options2.legend">
				</tui-charts-bar>
			</view>
			<view class="tui-title">八大英雄S8~S9赛季胜场数</view>
			<view class="tui-charts-box">
				<tui-charts-bar ref="tui_column_3" isStack tooltip :yAxis="options3.yAxis" :dataset="options3.dataset"
					:max="options3.max" :splitNumber="options3.splitNumber" :yAxisVal="options3.yAxisVal"
					:legend="options3.legend">
				</tui-charts-bar>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options1: {
					yAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
					dataset: [{
						name: '营业额',
						color: '#5677fc',
						source: [380, 210, 320, 480, 300, 200]
					}],
					max: 600,
					splitNumber: 100
				},
				options2: {
					legend: {
						show: true
					},
					yAxis: ['管理部', '销售部', '采购部', '生产部', '财务部'],
					dataset: [{
						name: '计划',
						color: '#07c160',
						source: [25, 40, 40, 45, 30]
					}, {
						name: '实际',
						color: '#ff7900',
						source: [15, 30, 20, 50, 30]
					}],
					max: 60,
					splitNumber: 10,
					yAxisVal: {
						show: true,
						color: '#EB0909',
						formatter: function(val) {
							let rate = (val[1] / val[0] * 100).toFixed(0)
							return `${rate}%`
						}
					}
				},
				options3: {
					legend: {
						show: true
					},
					yAxis: ['鲁班', '王昭君', '貂蝉', '李白', '韩信', '庄周', '刘备', '后羿'],
					dataset: [{
						name: 'S8',
						color: '#00867D',
						source: [60, 70, 90, 20, 30, 40, 35, 45]
					}, {
						name: 'S9',
						color: '#014E64',
						source: [40, 80, 30, 40, 70, 50, 30, 30]
					}],
					max: 200,
					splitNumber: 40,
					yAxisVal: {
						show: true,
						color: '#00867D',
						formatter: function(val) {
							let showVal = val;
							if (typeof val === 'object') {
								showVal = showVal.join('/')
							}
							return showVal
						}
					}
				}
			}
		},
		onReady() {
			this.$refs.tui_column_1.draw(this.options1.dataset)
			this.$refs.tui_column_2.draw(this.options2.dataset, this.options2.yAxisVal.formatter)
			this.$refs.tui_column_3.draw(this.options3.dataset, this.options3.yAxisVal.formatter)
		},
		methods: {

		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 80rpx 0 30rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.tui-charts-box {
		width: 100%;
		padding: 0 30rpx 0 80rpx;
		box-sizing: border-box;
	}
</style>
